<template>
  <div class="columnIndex" id="columnIndex">
    <div class="columnIndex_button">
      <a-button class="addButton" type="primary" @click="addRecord">
        <template #icon>
          <span class="iconfont icon-Add iconadd"></span>
        </template>
        新建
      </a-button>
      <a-button class="importButton" @click="createRecord">批量创建</a-button>
      <a-button :disabled="!btnPerm.includes('menuRecycleBinAble')" class="importButton"
        @click="recycleBin">回收站</a-button>
      <a-button class="importButton" :disabled="!btnPerm.includes('copyAble')" @click="columnCopy">复制栏目</a-button>
      <div class="searchContent">
        <a-input placeholder="搜索栏目名称" @pressEnter="onSearch" v-model:value="channelName" allowClear style="width: 230px">
          <template #suffix>
            <i class="iconfont icon-search" @click="onSearch"></i>
          </template>
        </a-input>
      </div>
    </div>
    <draggtreetable :columns="columns.columnManageColumns" :dataSource="configData.records" @dragEnd="dragEnd"
      :scroll="{ x: 'max-content', y: 600 }" ref="columnBaseTables" :showCheckDelete="showCheckDelete"
      :rowSelection="null" ele="columnIndex" :allOpenValue="allOpenValue">
      <template #headerCell="{ title, column }">
        <template v-if="column.dataIndex === 'channelName'">
        <span>{{ title }}</span> <span @click="allOpen" style="margin-left: 8px;color:#999999;cursor: pointer;"><span>全部{{!allOpenValue ? '展开' : '收起' }}</span> <i :class="!allOpenValue ? 'iconfont icon-down' : 'iconfont icon-up'" style="font-size: 24px;position: absolute;top:9px;color:#999999"></i></span>
        </template>
        <span v-else>{{title}}</span>
      </template>
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex == 'id' || column.dataIndex == 'channelPath'">
          <div style="cursor: pointer;" @click="copyPath(text)">{{ text}}</div>
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <!-- :disabled="!record.editPerm" -->
          <!--  需要根据每个栏目的字段设置按钮是否可以点击 -->
          <a type="link" class="eidtRecords" @click="goDetail(record)" :class="!record.editPerm ? 'disable' : ''">编辑</a>
          <a type="link" class="eidtRecords" @click="goColumnPower(record)"
            :class="!record.channelPerm ? 'disable' : ''">栏目操作权限</a>
          <!-- <a type="link" class="eidtRecords" @click="goDocPower(record)"
            :class="!record.documentPerm ? 'disable' : ''">文档权限</a> -->
          <a type="link" class="eidtRecords" v-if="record.children" @click="confirmDeleteParent(record)"
            :class="!record.recycledPerm ? 'disable' : ''">
            移入回收站
          </a>
          <a-popconfirm v-else placement="topRight" :disabled="!record.recycledPerm" @confirm="confirmDelete(record)">
            <template #title>
              <p style="width: 197px">是否将此栏目移入回收站</p>
            </template>
            <a :class="!record.recycledPerm ? 'disable' : ''">移入回收站</a>
          </a-popconfirm>
        </template>
      </template>
    </draggtreetable>
    <!-- 新建栏目模态框 -->
    <base-modal :width="modAlProps.width" :isVisible="isVisible" :title="modAlProps.title" :buttons="buttons"
      @handleOk="buttonMessage" @handleCancle="isVisible = false" class="securitycontent_modal">
      <template v-slot:body>
        <div>
          <a-form name="advanced_search" autoComplete="off" class="ant-advanced-search-form" :model="formState"
            ref="columnFrom">
            <a-form-item :label="formState.upOrg.label" :name="['upOrg', 'value']" :rules="[formState.upOrg.rule]">
              <a-tree-select class="AtreeSelect" placeholder="请选择" v-model:value="formState.upOrg.value"
                ref="usermanage_treeSelect" show-search :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
                allow-clear treeNodeFilterProp="channelName"
                :fieldNames="{ children: 'children', label: 'channelName', value: 'id' }" tree-default-expand-all
                :tree-data="upOrgOptions" @change="changeContent">
              </a-tree-select>
              <span v-if="isModelDisable" class="uporg-text">当前栏目下有内容，栏目模型会与上级栏目一致，且内容会移动至新建的栏目下；请先关闭采集设置再进行当前设置</span>
              <span v-if="!formState.upOrg.value" class="uporg-text">不选择上级栏目则创建的为一级栏目</span>
            </a-form-item>
            <a-form-item :label="formState.columnModel.label" :name="['columnModel', 'value']"
              :rules="[formState.columnModel.rule]">
              <a-select v-model:value="formState.columnModel.value" :disabled="isModelDisable" @change="changeModel"
                placeholder="请选择" :options="contentOptions"></a-select>
            </a-form-item>
            <a-form-item v-if="!isCreate" :name="['columnName', 'value']" :label="formState.columnName.label"
              :rules="[formState.columnName.rule]">
              <a-input placeholder="请输入" v-model:value="formState.columnName.value" @blur="changeBlur" show-count
                :maxlength="25" allow-clear />
            </a-form-item>
            <a-form-item v-if="!isCreate" :name="['path', 'value']" :label="formState.path.label"
              :rules="[formState.path.rule]">
              <a-input placeholder="仅支持输入数字、字母" v-model:value="formState.path.value" style="width: 256px" />
            </a-form-item>
            <a v-if="isCreate" style="margin-left: 80px" class="add-newcolumn" @click="addNewColumn">
              新增同级栏目
            </a>
            <div v-if="isCreate" class="addColumns">
              <a-tree :treeData="siteTree" :fieldNames="fieldNames" :checkable="false" :selectable="false"
                v-model:expandedKeys="expandedKeys">
                <template v-slot:title="record">
                  <div id="tree-item">
                    <!-- <a-input class="input" v-model:value="jjj" placeholder="请输入栏目名" @blur="editContent(record, $event)" /> -->
                    <div class="input" contenteditable="true" style="-webkit-user-select: auto" ref="dd"
                      @blur="editContent(record, $event)" placeholder="请输入栏目名称" @click.prevent.stop="OnFocus($event)">
                      {{ record.channelName }}
                    </div>
                    <span class="iconfont icon-add" @click="addOrMinusData(record, 'add')"></span>
                    <span class="iconfont icon-delete1" @click="addOrMinusData(record, 'minus')"></span>
                  </div>
                </template>
              </a-tree>
            </div>
          </a-form>
        </div>
      </template>
    </base-modal>
    <!-- 复制栏目模态框 -->
    <base-modal :width="modAlProps.width" :isVisible="isCopyVisible" :title="modAlProps.title" :buttons="buttons_copy"
      @handleOk="columnCopyOK" @handleCancle="isCopyVisible = false" class="securitycontent_modal">
      <template v-slot:body>
        <div>
          <a-form name="advanced_search" autoComplete="off" class="ant-advanced-search-form" :model="formState"
            ref="columnFrom">
            <a-form-item :label="formState.upOrg.label" :name="['upOrg', 'value']" :rules="[formState.upOrg.rule]">
              <a-tree-select class="AtreeSelect" placeholder="请选择复制后的栏目所属上级栏目" v-model:value="formState.upOrg.value"
                ref="usermanage_treeSelect" show-search allow-clear treeNodeFilterProp="channelName"
                :fieldNames="{ children: 'children', label: 'channelName', value: 'id' }" tree-default-expand-all
                :tree-data="upOrgOptions" @change="changeContent">
              </a-tree-select>
            </a-form-item>
            <a-form-item label="选择栏目">
              <base-tree :treeData="copyColumnData" :checkStrictly="checkStrictly" :checkedKeys="checkCopyColumnKeys"
                :fieldNames="fieldNames" @checked_Keys="checked_CopyColumnKeys" :selectable="false"
                :defaultExpandAll="true" :height="300">
              </base-tree>
            </a-form-item>
          </a-form>
        </div>
      </template>
    </base-modal>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick, watch, createVNode } from "vue";
import {
  scrollType,
  dataSourceType,
  detailDataType,
  configDataType,
  modeProp,
} from "@/type.d";
import request from "@/api/index";
import { useRouter } from "vue-router";
import columns from "@/components/table/tableConfig/columnsName";
import { Modal, message, TreeSelectProps } from "ant-design-vue";
import msgModal from "@/components/modal/modelConfig/MsGModal";
import draggtreetable from "@/components/table/draggTreeTable.vue";
import { getTableScroll } from "@/components/table/tableConfig/table";
import baseModal from "@/components/modal/baseModal.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import { checkColumnName } from "./formRuler";
import { randomWord } from "@/utils/common";
import iptRules from "@/utils/inputRule";
import { routerPerm } from "@/utils/common";
import baseTree from "@/components/tree/baseTree.vue";
import copy from 'copy-to-clipboard';

//data
const btnPerm = ref<any[]>([]);
const fieldNames = reactive({ title: "channelName", key: "id" });

const siteTree = ref([
  {
    channelName: "",
    id: "0-0",
    children: [],
  },
]);
const columnBaseTables = ref<any>(null);
let scroll: scrollType = reactive({ y: "", isFixed: false });
const rowKey = ref<String | Number>("id"); // 选中的表格项
const buttons = ref<dataSourceType[]>([]); //模态框button按钮个数和文案修改
const showCheckDelete = true; // 是否需要分页器中的自定义
const expandedKeys = ref<(string | number)[]>([]); // 展开新增栏目树
const allOpenValue = ref<boolean>(false); // 全部展开/收起
//索引号管理集中数据
let configData = reactive<configDataType>({ total: 0, size: 10, records: [] });
const columnFrom = ref<any>("columnFrom");
const upOrgOptions = ref<TreeSelectProps["treeData"]>([]);
const contentOptions = ref([]);
const isCopyVisible = ref<boolean>(false);
const isModelDisable = ref<boolean>(false);

//栏目新增-根据栏目id获取栏目内容是否存在和模型信息
const checkColumnContent = async () => {
  let param = { id: formState.value.parentId };
  const content = await request.fetchChannelContentModel(param);
  if (content.contentExists) {
    formState.value.modelId = content.modelId;
  }
};
//复制栏目
const checkStrictly = ref<Boolean>(true); //树型节点选择不关联
const checkCopyColumnKeys = ref<(string | number | any)[]>([]);
const copyColumnData = ref<dataSourceType[]>([]);
const buttons_copy = ref([
  {
    text: "提交",
    "html-type": "submit",
    disabled: true,
  },
]);
const formState = ref<dataSourceType>({
  upOrg: {
    value: undefined,
    rule: {
      required: false,
      // validator: checkOrgContent,
      // msg1: '当前栏目下有内容，栏目模型会与上级栏目一致，且内容会移动至新建的栏目下；请先关闭采集设置再进行当前设置',
      // api: 'fetchChannelContentExist',
      trigger: [""],
    },
    msg: "",
    label: "上级栏目",
  },
  columnModel: {
    value: undefined,
    rule: {
      required: true,
      trigger: ["change", "blur"],
      message: "栏目模型不能为空！",
    },
    label: "栏目模型",
  },
  columnName: {
    value: "",
    rule: {
      required: true,
      validator: checkColumnName,
      trigger: ["blur", "change"],
      msg1: "栏目名称不能为空！",
      msg2: "栏目名称已存在！",
      api: "channelNameCheck",
      params: { id: "" },
    },
    label: "栏目名称",
  },
  path: {
    value: "",
    rule: {
      required: true,
      trigger: ["blur"],
      validator: iptRules.enNum,
      api: "fetchUserSecretUnique",
    },
    label: "访问路径",
  },
  parentId: "",
  modelId: "",
  id: "",
});
const channelName = ref("");
const isCreate = ref<boolean>(false); //判断是新家、编辑或者批量上传来复用模态框
// const dataList = ref(dataSource.value.slice(0, 10))
const modAlProps: modeProp = reactive({
  width: "M",
  title: "复制栏目",
});
const deleteArr = ref<(string | number)[]>([]);
const isVisible = ref(false); //控制是否展示编辑对话框
const router = useRouter();
//methods

const copyPath = (url: any) => {
  copy(url);
  message.success('复制成功！')
}

const allOpen = () => {
  allOpenValue.value = !allOpenValue.value

};
const confirmDelete = async (item: dataSourceType) => {
  // 删除单个
  let param = { id: item.id };
  await request.fetchChannelRecycled(param).then((res: any) => {
    if (res.code == "00000 00000") {
      // for (let i = 0; i < configData.records.length; i++) {
      //   if (item.id === configData.records[i].id) {
      //     configData.records.splice(i, 1);
      //   }
      // }
      getRdecord();
      fetchChannelChannelTree();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  });
};
const deleteRecords = async (item: dataSourceType) => {
  // 删除单个
  let param = { id: item.id };
  await request.fetchChannelRecycled(param).then((res: any) => {
    if (res.code == "00000 00000") {
      getRdecord();
      fetchChannelChannelTree();
      message.success(res.message);
    } else {
      message.error(res.message);
    }
  });
};

const confirmDeleteParent = (item: dataSourceType) => {
  if (!item.recycledPerm) return;
  Modal.confirm(
    Object.assign({}, msgModal.confirm, {
      title: "是否继续移入回收站",
      content:
        "该栏目下还有子栏目，将此栏目移入回收站，会同步将该栏目下的所有的子栏目以及内容同步移入回收站",
      icon: createVNode("i", {
        class: "iconfont icon-warn warning_ICON",
      }),
      okText: "继续移入",
      onOk: async () => {
        await deleteRecords(item);
        Modal.destroyAll();
      },
      onCancel() {
        Modal.destroyAll();
      },
    })
  );
};

//新增栏目
const addNewColumn = () => {
  let obj = {
    channelName: "",
    id: randomWord(false, 4, 4),
    children: [],
  };
  let data = JSON.parse(JSON.stringify(siteTree.value));
  data.push(obj);
  siteTree.value = JSON.parse(JSON.stringify(data));
};

const OnFocus = (ev: any) => {
  // 显示隐藏placeholder
  ev.target.blur();
  ev.target.focus();
};
const editContent = (record: any, ev: any) => {
  let value = ev.target.innerText;
  // 自动清除空格和回车
  value = value.replace(/\s+/g, '')
  let data = JSON.parse(JSON.stringify(siteTree.value));
  loop(data, record.id, value, "modify");
  siteTree.value = JSON.parse(JSON.stringify(data));
};
const addOrMinusData = (record: any, type: string) => {
  let data = JSON.parse(JSON.stringify(siteTree.value));
  loop(data, record.id, "", type);
  siteTree.value = JSON.parse(JSON.stringify(data));
  nextTick(() => {
    !expandedKeys.value.includes(record.id) ? expandedKeys.value.push(record.id) : "";
  });
};
const loop = (data: dataSourceType[], id: any, value: any, type: string): any => {
  for (let i = 0; i < data.length; i++) {
    if (data[i].id == id) {
      type == "modify" ? (data[i].channelName = value) : ""; // 修改值
      type == "minus" ? data.splice(i, 1) : ""; //删除值
      if (type == "add") {
        let obj = {
          channelName: "",
          id: randomWord(false, 4, 4),
          children: [],
        };
        data[i].children.push(obj);
      }
    } else {
      if (data[i].children instanceof Array && data[i].children.length) {
        loop(data[i].children, id, value, type);
      }
    }
  }
};

//获取新增层级树列表
const fetchChannelChannelTree = async () => {
  let data = await request.fetchChannelChannelTree();
  nextTick(() => {
    copyColumnData.value = JSON.parse(JSON.stringify(data));
    upOrgOptions.value = JSON.parse(JSON.stringify(data));
    deepRec(upOrgOptions.value);
  });
};

//获取上级栏目id
const changeContent = async (e: string, options: any) => {
  formState.value.upOrg.value = e;
  formState.value.parentId = e;
  const res = await request.fetchChannelContentExist({ id: e });
  if (res.contentExists) {
    isModelDisable.value = true;
    formState.value.columnModel.value = getModelValue(res.modelId);
    formState.value.modelId = res.modelId;
  } else {
    isModelDisable.value = false;
  }
};

//栏目名称
const changeBlur = async (e: any) => {
  let params: dataSourceType = {
    text: e.target.value,
  };
  if (formState.value.path.value === "") {
    await request.fetchChiese2PY(params).then((res: dataSourceType) => {
      formState.value.path.value = formState.value.path.value || res;
    });
    ``;
  }
};
//获取栏目模型id
const changeModel = (e: string, options: any) => {
  formState.value.columnModel.value = e;
  formState.value.modelId = options.id;
};
//新加栏目模态框条件修改
const addRecord = async () => {
  router.push({
    path: "/colunm/createColumn",
  });
  return
  //fetchColumnModelList
  //添加栏目数据
  isVisible.value = true;
  isCreate.value = false;
  modAlProps.title = "新建栏目";
  formState.value.upOrg.value = undefined;
  formState.value.columnModel.value = undefined;
  formState.value.columnName.value = "";
  formState.value.path.value = "";
  formState.value.parentId = "";

  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
};
// 复制栏目对话框
const columnCopy = async () => {
  isCopyVisible.value = true;
  //fetchColumnModelList
  //添加栏目数据
  isVisible.value = false;
  isCreate.value = false;

  modAlProps.title = "复制栏目";
  formState.value.upOrg.value = undefined;
  formState.value.columnModel.value = "";
  formState.value.columnName.value = "";
  formState.value.path.value = "";

  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
};
//确认复制栏目
const columnCopyOK = async () => {
  let param = {
    sourceChannelIdList: checkCopyColumnKeys.value,
    targetChannelId: formState.value.upOrg.value || undefined,
  };
  await request
    .editChannelCopy(param)
    .then((res: dataSourceType) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        isCopyVisible.value = false;
        getRdecord();
        checkCopyColumnKeys.value = []
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

//批量创建栏目
const createRecord = async () => {
  //fetchColumnModelList
  const param: {} = {
    modelType: 1,
    name: "",
    status: "",
    type: "",
  };
  contentOptions.value = (await request.fetchColumnModelList(param)) || {};
  contentOptions.value.forEach((item: any) => {
    item.value = item.name;
  });

  //添加栏目数据
  isVisible.value = true;
  isCreate.value = true;
  modAlProps.title = "批量创建栏目";
  formState.value.upOrg.value = undefined;
  formState.value.columnModel.value = undefined;
  buttons.value = [
    {
      text: "保存",
      "html-type": "submit",
      keepAlive: true,
    },
  ];
};

//还原回收站
const recycleBin = (record: any) => {
  router.push({
    path: "/recycleBin",
    name: "栏目管理-回收站",
    query: {
      id: record.id,
    },
  });
};

const dragEnd = async (param: dataSourceType) => {
  // 拖拽变换表格数据
  await request
    .fetchChannelSort(param)
    .then((res: dataSourceType) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        getRdecord();
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

//获取栏目模型的选项列表
const getColumnModelLList = async () => {
  const param: {} = {
    modelType: 1,
    name: "",
    status: 1,
    type: "",
  };
  contentOptions.value = (await request.fetchColumnModelList(param)) || {};
  contentOptions.value.forEach((item: any) => {
    item.value = item.name;
  });
};

//前往详情页
const goDetail = async (record: dataSourceType) => {
  if (!record.editPerm) return;
  //编辑内容类型数据
  router.push({
    path: "/detail",
    name: "栏目详情",
    query: {
      channelId: record.id,
      parentId: record.parentId,
      parentPath: record.path as any,
    },
  });
};
//前往栏目权限
const goColumnPower = async (record: dataSourceType) => {
  console.log(record);
  
  //编辑内容类型数据
  if (!record.channelPerm) return;
  router.push({
    path: "/columnPower",
    name: "栏目-栏目权限",
    query: {
      id: record.id,
      dataType: 4,
      channelName: record.channelName,
    },
  });
};
//前往文档权限
const goDocPower = async (record: dataSourceType) => {
  //编辑内容类型数据
  if (!record.documentPerm) return;
  router.push({
    path: "/docPower",
    name: "栏目-文档权限",
    query: {
      id: record.id,
      dataType: 5,
    },
  });
};

// 新添或编辑栏目调取接口
//保存
const buttonMessage = async (msg: dataSourceType) => {
  columnFrom.value
    .validate()
    .then(() => {
      if (isCreate.value) {
        const params = {
          parentId: formState.value.parentId,
          modelId: formState.value.modelId,
          nameTreeDtoList: siteTree.value,
        };

        request
          .fetchChannelBatchAdd(params)
          .then((res: any) => {
            if (res.code == "00000 00000") {
              getRdecord();
              fetchChannelChannelTree();
              message.success(res.message);
              siteTree.value = [
                {
                  channelName: "",
                  id: "0-0",
                  children: [],
                },
              ];
            } else {
              message.error(res.message);
            }
          })
          .catch((err: any) => {
            throw new Error(err);
          });
        isVisible.value = false;
      } else {
        let type: string = modAlProps.title.includes("编辑") ? "Edit" : "Add";

        const params = {
          parentId: formState.value.parentId,
          modelId: formState.value.modelId,
          channelName: formState.value.columnName.value,
          channelPath: formState.value.path.value,
        };

        request[type === "Edit" ? "fetchChannelUpdate" : "fetchChannelAdd"](params)
          .then((res: any) => {
            if (res.code == "00000 00000") {
              getRdecord();
              fetchChannelChannelTree();
              message.success(res.message);
              siteTree.value = [
                {
                  channelName: "",
                  id: "0-0",
                  children: [],
                },
              ];
            } else {
              message.error(res.message);
            }
          })
          .catch((err: any) => {
            throw new Error(err);
          });
        isVisible.value = msg.text == "保存" ? false : true;
      }
    })
    .catch(() => { });
};
const parentKey = ref<(string | number)[]>([]);
const getParentKey = (data: dataSourceType[]) => {
  for (let i = 0; i < data.length; i++) {
    parentKey.value.push(data[i].id);
    if (data[i].children) {
      getParentKey(data[i].children);
    }
  }
};

const getRdecord = async () => {
  // 获取表格数据
  const param: {} = {
    channelName: channelName.value,
  };
  const data = (await request.fetchChannelTreeList(param)) || [];
  configData.records = data;

  nextTick(() => {
    parentKey.value = [];
    getParentKey(data);
    expandedKeys.value = parentKey.value;

    let obj = getTableScroll(74, "columnIndex");
    scroll.y = obj.y;
    scroll.isFixed = obj.isFixed;
  });
};

//搜索栏目名称
const onSearch = () => {
  if(!channelName.value) {
    allOpenValue.value = false;
  } else {
    allOpenValue.value = true;
  }
  getRdecord();
};

// 树形是否可点击工具
const deepRec = function (data: any) {
  data.forEach((item: any) => {
    if (!item.createChildPerm) {
      item.disabled = true;
    } else {
      item.disabled = false;
    }
    if (item.children && item.children.length > 0) {
      deepRec(item.children);
    }
  });
};
const checked_CopyColumnKeys = (val: any) => {
  checkCopyColumnKeys.value = val.checkedKeys.checked;
  if (checkCopyColumnKeys.value.length > 20) {
    checkCopyColumnKeys.value = checkCopyColumnKeys.value.slice(0, 20);
    message.warning("单次选择最多20条");
  }
  disabledParent(upOrgOptions.value, checkCopyColumnKeys.value);
  buttons_copy.value[0].disabled = checkCopyColumnKeys.value.length ? false : true;
};
const disabledParent = function (data: any, id: any[]) {
  data.forEach((item: any) => {
    if (id.includes(item.id)) {
      item.disabled = true;
      item.disableCheckbox = true;
    } else if (!item.createChildPerm) {
      item.disabled = true;
      item.disableCheckbox = true;
    } else {
      item.disabled = false;
      item.disableCheckbox = false;
    }

    if (item.children && item.children.length > 0) {
      disabledParent(item.children, id);
    }
  });
};
const getModelValue = (id: number | string) => {
  let modelName: string = "";
  contentOptions.value.length &&
    contentOptions.value.forEach((item: dataSourceType) => {
      if (item.id === id) {
        modelName = item.value || "";
      }
    });

  return modelName;
};
//onmounted
onMounted(async () => {
  btnPerm.value = routerPerm();
  getRdecord();
  getColumnModelLList();
  fetchChannelChannelTree();
});
</script>
<style lang="less" scoped>
::v-deep(.AtreeSelect.ant-select-open .ant-select-selector) {
  width: auto;
}

::v-deep(.ant-form-item-with-help .ant-form-item-explain) {
  margin-bottom: 8px;
}

.columnIndex {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;
  :deep(.ant-input-suffix) {
    margin-right: 17px;
  }

  ::v-deep(.draggTable) {
    overflow: auto;
  }

  .columnIndex_button {
    padding-bottom: 16px;
    display: flex;

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;

      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .importButton {
      font-weight: 400;
      // color: rgba(0, 0, 0, 0.85);
      margin-right: 8px;
    }

    .searchContent {
      margin-left: auto;
      margin-right: 0px;

      .icon-search {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.45);
        position: absolute;
        right: 12px;
        top: 0px;
      }
    }
  }
}

.addColumns {
  margin-top: 24px;
  margin-left: 80px;

  #tree-item {
    display: flex;
    align-items: center;
    width: 190px;

    .input {
      width: 160px;
      border-color: #fff;
      box-shadow: none;
      box-sizing: border-box;
      height: 32px;
      line-height: 32px;
      padding-left: 8px;
      position: relative;
      z-index: 1;

      // /* 输入框为空时显示 placeholder */
      &:empty:before {
        content: attr(placeholder);
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.25);
        line-height: 32px;
        position: absolute;
        z-index: -2;
      }

      /* 输入框获取焦点时移除 placeholder */
      &:focus:before {
        content: none;
      }
    }

    .input:hover {
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .input:focus {
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .iconfont {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.45);
      display: none;

      &:hover {
        color: rgba(0, 0, 0, 0.85);
      }
    }

    .iconfont:nth-of-type(1) {
      margin-left: 8px;
      margin-right: 12px;
    }
  }
}

.uporg-text {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}

:deep(.ant-form-item-label) {
  width: 80px;
}

:deep(.ant-form-item:last-child) {
  margin-bottom: 0;
}

.eidtRecords {
  padding: 0 10px 0 0;
}

.eidtRecords:nth-last-child(1) {
  padding-right: 0px;
}

.disable {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.actives {
  color: #aaa;
}
</style>
<style lang="less">
.addColumns {
  .ant-tree .ant-tree-node-content-wrapper:hover {
    background-color: #fff;
  }

  .ant-tree-treenode {
    width: 100%;
  }

  .ant-tree-treenode:hover {
    #tree-item .iconfont {
      display: block;
    }
  }


}

.ant-table-row .ant-table-cell:nth-last-child(1) {
  text-align: right;
}
</style>
